<template>
  <div id="hotel">
    <Header />
    <Nav />
    <div class="content hotel">
      <el-card>
        <div class="title"><h2>酒店详情</h2></div>
        <p><h1>{{ items.value.title }}</h1></p>
       <p> <img :src="items.value.img" alt="" width="500" height="300"></p>
       <p>￥{{ items.value.price }}</p>
       <div class="btn">
        <el-button type="primary" round @click="buy(items.value)">预定</el-button>
        <el-button type="success" round @click="collect">收藏</el-button>
       </div>
      </el-card>
      <Comment/>
    </div>
    <Bottom />
  </div>
</template>

<script setup>
import Header from "@/components/Header.vue";
import Nav from "@/components/Nav.vue";
import Comment from "../comment/Comment.vue";
import Bottom from "@/components/Bottom.vue";

import { ref, watch, reactive, computed, watchEffect } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const store = useStore();
const route = useRoute();
const id = ref(null);
// 监听路由参数的变化
watch(
  () => route.query.id,
  (newId, oldId) => {
    id.value = newId;
  }
);
id.value = route.query.id;

const hotelList = computed(() => {
  return store.state.hotelList;
});

const items = reactive({});
watchEffect(() => {
  items.value = hotelList.value.find((item) => item.id == id.value);
});


const isLogin = computed(() => {
  return localStorage.isLogin || 0;
});

const collect = () => {
  if (isLogin.value == 0) {
    return ElMessage({
      message: "请先登录！",
      type: "error"
    });
  }
  let collectList = JSON.parse(localStorage.getItem("collectList")) || [];
  const v = collectList.find((item) => item.id == items.value.id);
  if (v) {
    return ElMessage({
      message: "已有该收藏！",
      type: "error"
    });
  }
  collectList.push(items.value);
  localStorage.setItem("collectList", JSON.stringify(collectList));
  ElMessage({
    message: "收藏成功！",
    type: "success"
  });
};


const buy=(item)=>{
  let orderList = JSON.parse(localStorage.getItem("orderList")) || [];
  const currentTime = new Date();
  let obj={
    travel:"酒店",
    ...item,timestamp: currentTime
  }
  orderList.push(obj);
  localStorage.setItem("orderList", JSON.stringify(orderList));
  ElMessage({
    message: "付款成功！",
    type: "success"
  });
}
</script>

<style lang="scss" scoped>
.hotel {
  flex-direction: column;
  margin-top: 30px;
  ::v-deep .el-card {
    width: 100%;
  }
  .title {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 20px;
  }
  p{
    margin: 30px 0;
  }
  .btn{
    margin-left: 180px;
  }
}
</style>
